<template>
    <div :class="`menu-tag-item ${styleMode}`" :style="style">{{name}}</div>
</template>

<script>
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
export default {
    name: 'MenuTagItem', // 菜品提示
    props: {
        name: String,
        mode: {
            type: String,
            default: DEFAULT_MODE, // 模式，取值：浅色版（white）、深色版（black）
        },
        theme: {
            type: String,
            default: DEFAULT_THEME, // 主题，取值颜色
        },
        styleMode: {
            type: String,
            default: DEFAULT_STYLE_MODE, // 风格，取值：circle-圆角风格 square-直角风格，默认：circle
        }
    },
    computed: {
        style() {
            const { theme } = this.$props;
            return `border-color: ${theme}; color: ${theme};`;
        },
    },
};
</script>

<style lang="less">
.menu-tag-item {
    font-size: @font-size-mini;
    .p-v(1);
    .p-h(3);
    min-height: 14px;
    line-height: 1.5;
    background-color: transparent;
    .m-r(@gap-sm);
    border-width: 1px;
    border-style: solid;
    display: inline-block;
    .m-b(2);
    &.circle {
        border-radius: @border-radius / 2;
    }
}
</style>
